// 引入Vue
import Vue from 'vue'
// 引入Vue-router
import VueRouter from 'vue-router'
// 引入路由组件
import HomeView from '../views/HomeView.vue'


// 在Vue中使用Vue-router
Vue.use(VueRouter)

// 2. 定义路由(路由的配置)
// 每个路由应该映射一个组件。 其中"component" 可以是
const routes = [  // 数组
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 异步路由  => (如果载入的路由页面有异步操作 可以通过 component接收箭头函数) =>  这个动态导入会返回一个 `Promise` 对象。
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

// // 3. 创建 router 实例，然后传 `routes` 配置
// router 路由实例 (包含所有的路由配置)
const router = new VueRouter({
  mode: 'hash',   // 路由使用的模式  hash模式: localhost:8080/#/home
  base: process.env.BASE_URL,
  routes  //路由的配置
})

export default router
